const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    publicPath: '/',
    // devServer: {
    //     // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
    //     historyApiFallback: {
    //         index: '/index.html' //与output的publicPath
    //     },
    // },
    // 开启 gzip 压缩
    configureWebpack: config => {
        config.plugins = [
            ...config.plugins,
            // 开启 gzip 压缩
            new CompressionPlugin({
                filename: '[path][base].gz',
                algorithm: 'gzip',
                test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
                threshold: 10240,
                minRatio: 0.8
            })
        ]
    },
    // 首屏请求优化
    // vue 脚手架默认开启了 preload 与 prefetch，当我们项目很大时，这个就成了首屏加载的最大元凶了
    // preload 与 prefetch 都是一种资源预加载机制；
    // preload 是预先加载资源，但并不执行，只有需要时才执行它；
    // prefetch 是意图预获取一些资源，以备下一个导航/ 页面使用；
    // preload 的优先级高于 prefetch。
    chainWebpack (config) {
        config.plugins.delete('preload') // 删除默认的preload
        config.plugins.delete('prefetch') // 删除默认的prefetch
    },
    // 把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。这样打包后文件小而且别人看不到你的源码了。
    productionSourceMap: false
}
